<template>
  <div class="box">
    <div class="login">
      <van-nav-bar
        title="注册"
        left-text="返回"
        right-text=". . ."
        left-arrow
        @click-left="$router.back()"
      />
      <div class="content">
        <div class="block">
          <input
            type="text"
            v-model="fromdata.phone"
            placeholder="请输入手机号"
          />
        </div>
        <div class="block">
          <input
            type="password"
            v-model="fromdata.pass"
            placeholder="请输入密码"
          />
        </div>
        <div class="block">
          <input
            type="password"
            v-model="fromdata.checkpass"
            placeholder="请输入确定密码"
          />
        </div>
        <div class="btn" @click="register">
          <input type="button" value="注册" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { user_register } from "@/utils/api";
export default {
  data() {
    return {
      fromdata: {
        phone: "",
        pass: "",
        checkpass: "",
      },
    };
  },
  methods: {
    register() {
      // 正侧
      if (/^1[3-9]\d{9}$/.test(this.fromdata.phone) == false) {
        Toast("请输入合法手机号");
      } else if (!this.fromdata.pass || !this.fromdata.checkpass) {
        Toast("请输入密码/正确密码");
      } else if (this.fromdata.pass !== this.fromdata.checkpass) {
        Toast("输入密码不一致");
      } else {
        // 深拷贝
        var newdata = JSON.parse(JSON.stringify(this.fromdata));
        // 删除确定密码
        delete newdata.checkpass;
        user_register(newdata).then((res) => {
          console.log(res.data);
          if (res.data.code == 200) {
            Toast.success(res.data.msg + "前往登录页");
            this.$router.push("/login");
          } else {
            Toast.fail(res.data.msg);
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  background-image: url(../../public/33.png);
  background-repeat: round;
  height: 667px;
}
.login {
  .content {
    margin: 0 0.5333rem;
    input {
      border: 0;
      outline: none;
      width: 100%;
      height: 1.0667rem;
      padding: 0.5333rem;
      box-sizing: border-box;
      border: 0.0267rem solid #ccc;
      border-radius: 0.5333rem;
      margin: 0.5333rem 0;
      line-height: 0rem;
      font-size: 0.4267rem;
      text-align: center;
    }
    .btn input {
      background-color: #1989fa;
    }
  }
}
</style>